<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" :content="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"> 保 存</el-button>
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label="企业名称" prop="companynam">
                <el-input v-model="dataForm.companynam" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业简称" prop="simplenam">
                <el-input v-model="dataForm.simplenam" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业类型" prop="type">
                <el-select v-model="dataForm.type" placeholder="请选择" clearable :style='{"width":"100%"}'>
                  <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName" :value="item.id"
                    :disabled="item.disabled"></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业介绍" prop="introduce">
                <el-input v-model="dataForm.introduce" placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                  :autosize='{"minRows":4,"maxRows":4}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业地址" prop="adress">
                <el-input v-model="dataForm.adress" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业联系人" prop="contact">
                <el-input v-model="dataForm.contact" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人电话" prop="phone">
                <el-input v-model="dataForm.phone" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  export default {
    components: {},
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        isDetail: false,
        dataForm: {
          companynam: '',
          simplenam: '',
          type: "",
          introduce: '',
          adress: '',
          contact: '',
          phone: '',
        },
        rules: {
          companynam: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }, ],
          type: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          contact: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }, ],
          phone: [{
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
            {
              pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            },
          ],
        },
        typeOptions: [{
          "fullName": "私企",
          "id": "1"
        }, {
          "fullName": "国企",
          "id": "2"
        }],

      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      goBack() {
        this.$emit('refresh')
      },
      clearData(data) {
        for (let key in data) {
          if (data[key] instanceof Array) {
            data[key] = [];
          } else if (data[key] instanceof Object) {
            this.clearData(data[key]);
          } else {
            data[key] = "";
          }
        }
      },
      init(id, isDetail) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            this.loading = true
            request({
              url: '/api/example/BusCompany/' + this.dataForm.id,
              method: 'get'
            }).then(res => {
              this.dataInfo(res.data)
              this.loading = false
            });
          } else {
            this.clearData(this.dataForm)
          }
        });
        this.$store.commit('generator/UPDATE_RELATION_DATA', {})
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.request()
          }
        })
      },
      request() {
        var _data = this.dataList()
        if (!this.dataForm.id) {
          request({
            url: '/api/example/BusCompany',
            method: 'post',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.$emit('refresh', true)
              }
            })
          })
        } else {
          request({
            url: '/api/example/BusCompany/' + this.dataForm.id,
            method: 'PUT',
            data: _data
          }).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.visible = false
                this.$emit('refresh', true)
              }
            })
          })
        }
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }

</script>
